<template>
  <div>
    <x-header>{{title}}
      <!-- <router-link to="/" slot="right"> <a class="fa fa-home fa-15x"></a> </router-link> -->
    </x-header>
    <div v-if="loaded" class="formBox gzbank-style">
      <ab-custom-form ref="form">
      </ab-custom-form>
    </div>
    <tabbar style="position:fixed" class="gzbank-style">
      <tabbar-item v-show="!isReadOnly">
        <span slot="icon" class="icon-primary-fa fa fa-clipboard" v-on:click="saveData"></span>
        <span slot="label" v-on:click="saveData">保存</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import Vue from 'vue'
  import bpmService from '@/service/bpm/bpmService'
  import formService from '@/service/form/formService'

  export default {
    methods: {
      saveData: function() {
        var errorMsg = formService.getValidateMsg(this.$refs.form);
        if (errorMsg) {
          Vue.tools.alert("表单校验不通过" + errorMsg, "错误信息");
          return;
        }
        var url = Vue.__ctx + "/form/formDefData/saveData?key=" + this.$route.query.key;
        var post = Vue.baseService.post(url, this.$refs.form.data);
        Vue.tools.getResultMsg(post, () => {
          this.$router.go(0);
        });
      }
    },
    data: function() {
      return {
        loaded: false,
        isReadOnly: false,
        title: ""
      }
    },
    created: function() {
      var that = this;
      var url = Vue.__ctx + "/form/formDefData/getData";
      if (this.$route.query.isReadOnly) {
        this.isReadOnly = true;
      }
      if (this.$route.query.key) {
        this.key = this.$route.query.key
      }
      var post = Vue.baseService.postForm(url, {
        key: this.$route.query.appKey || this.$route.query.key,
        id: this.$route.query.id,
        isReadOnly: this.$route.query.isReadOnly,
      });

      Vue.tools.getResultData(post, function(data) {
        formService.initCustFormFu(data.html, data);
        that.title = data.title;
        that.$data.loaded = true;
      });
    }
  }
</script>
